<template>
	<!-- 模板部分保持不变 -->
	<div class="login-container">
		<div class="bg-mask"></div>
		<div class="login-box">
			<div class="login-header">
				<div class="logo-container">
					<div class="logo-icon">
						<svg viewBox="0 0 24 24" fill="currentColor">
							<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
						</svg>
					</div>
					<h2 class="art-title">后台管理系统</h2>
					<p class="subtitle">欢迎回来，请登录您的账户</p>
				</div>
			</div>
			<el-form :model="loginForm" :rules="rules" ref="loginFormRef" class="login-form">
				<el-form-item prop="username">
					<el-input 
						v-model="loginForm.username" 
						placeholder="请输入用户名" 
						prefix-icon="User"
						class="custom-input" 
					/>
				</el-form-item>
				<el-form-item prop="password">
					<el-input 
						v-model="loginForm.password" 
						type="password" 
						placeholder="请输入密码" 
						prefix-icon="Lock"
						@keyup.enter="handleLogin"
						class="custom-input"
					/>
				</el-form-item>
				<el-form-item>
					<el-button 
						type="primary" 
						@click="handleLogin" 
						class="login-button"
						:loading="loading"
					>
						{{ loading ? '登录中...' : '登录' }}
					</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'
	import adminapi from '../api/adminapi'
	import {
		useRouter
	} from 'vue-router'

	const router = useRouter();
	const emit = defineEmits(['login-success'])

	const loginFormRef = ref()
	const loading = ref(false)
	const loginForm = reactive({
		username: '',
		password: ''
	})

	const rules = {
		username: [{
			required: true,
			message: '请输入用户名',
			trigger: 'blur'
		}],
		password: [{
			required: true,
			message: '请输入密码',
			trigger: 'blur'
		}]
	}

	const handleLogin = async () => {
		try {
			await loginFormRef.value.validate()
			loading.value = true

			const response = await adminapi.adminLogin(loginForm)

			if (response.code === 200) {
				localStorage.setItem('user', JSON.stringify({
					username: loginForm.username,
					loginTime: new Date().toISOString()
				}))
				ElMessage.success('登录成功')
				emit('login-success')
			} else {
				ElMessage.error(response.message || '登录失败')
				loginForm.password = ''
			}
		} catch (error) {
			console.error('登录失败:', error)
			
			// 更完善的错误处理
			if (error.response) {
				// 服务器响应了错误状态码
				const status = error.response.status
				const message = error.response.data?.message || error.response.data?.error || '登录失败'
				
				if (status === 401) {
					ElMessage.error('用户名或密码错误')
				} else if (status === 403) {
					ElMessage.error('账户已被禁用')
				} else if (status === 500) {
					ElMessage.error('服务器内部错误')
				} else {
					ElMessage.error(message)
				}
			} else if (error.request) {
				// 请求已发出但没有收到响应
				ElMessage.error('网络连接失败，请检查网络设置')
			} else {
				// 其他错误
				ElMessage.error('登录过程中发生未知错误')
			}
			
			loginForm.password = ''
		} finally {
			loading.value = false
		}
	}
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap');

.login-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #e3f2fd 0%, #f0f8ff 50%, #e1f5fe 100%);
  /* 浅蓝色渐变背景 */
}

.bg-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(25, 118, 210, 0.05);
  /* 淡蓝色遮罩 */
}

.login-box {
  position: relative;
  z-index: 3;
  width: 420px;
  padding: 48px 40px 40px 40px;
  background: rgba(255, 255, 255, 0.95);
  /* 半透明白色背景 */
  backdrop-filter: blur(10px);
  border-radius: 24px;
  border: 1px solid rgba(25, 118, 210, 0.1);
  /* 淡蓝色边框 */
  box-shadow: 0 8px 32px rgba(25, 118, 210, 0.12);
  /* 蓝色阴影 */
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
}

.login-box:hover {
  box-shadow: 0 12px 40px rgba(25, 118, 210, 0.18);
  /* 悬停时增强阴影 */
}

.login-header {
  margin-bottom: 32px;
  text-align: center;
}

.logo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.logo-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #2196f3, #1976d2);
  /* 蓝色渐变 */
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
  box-shadow: 0 4px 16px rgba(25, 118, 210, 0.3);
  /* 蓝色阴影 */
}

.logo-icon svg {
  width: 32px;
  height: 32px;
}

.art-title {
  font-size: 2.2rem;
  font-weight: bold;
  letter-spacing: 2px;
  color: #1976d2;
  /* 蓝色标题 */
  margin: 0;
  text-align: center;
  text-shadow: 0 2px 8px rgba(25, 118, 210, 0.1);
  /* 淡蓝色阴影 */
}

.subtitle {
  color: #42a5f5;
  /* 浅蓝色副标题 */
  font-size: 1rem;
  margin: 0;
  letter-spacing: 1px;
}

.login-form {
  width: 100%;
}

.el-form-item {
  margin-bottom: 24px;
}

.custom-input :deep(.el-input__wrapper) {
  border-radius: 12px !important;
  background: #f8fbff !important;
  /* 浅蓝色输入框背景 */
  border: 2px solid #e3f2fd !important;
  /* 淡蓝色边框 */
  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.08) !important;
  /* 淡蓝色阴影 */
  transition: all 0.3s ease;
}

.custom-input :deep(.el-input__wrapper:hover) {
  border-color: #bbdefb !important;
  /* 悬停时边框变深 */
  box-shadow: 0 4px 12px rgba(25, 118, 210, 0.12) !important;
}

.custom-input :deep(.el-input__wrapper.is-focus) {
  border-color: #2196f3 !important;
  /* 聚焦时蓝色边框 */
  box-shadow: 0 4px 16px rgba(25, 118, 210, 0.15) !important;
}

.custom-input :deep(.el-input__inner) {
  font-size: 1rem;
  padding: 12px 16px;
  color: #1976d2;
  /* 蓝色文字 */
  font-weight: 500;
}

.custom-input :deep(.el-input__inner::placeholder) {
  color: #90caf9;
  /* 浅蓝色占位符 */
}

.custom-input :deep(.el-input__prefix) {
  color: #42a5f5;
  /* 浅蓝色图标 */
}

.login-button {
  border-radius: 12px !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  padding: 14px 0 !important;
  background: linear-gradient(135deg, #2196f3, #1976d2) !important;
  /* 蓝色渐变按钮 */
  color: #fff !important;
  border: none !important;
  width: 100% !important;
  box-shadow: 0 4px 16px rgba(25, 118, 210, 0.3) !important;
  /* 蓝色阴影 */
  transition: all 0.3s ease !important;
  letter-spacing: 1px !important;
}

.login-button:hover {
  background: linear-gradient(135deg, #1976d2, #1565c0) !important;
  /* 深蓝色渐变悬停 */
  box-shadow: 0 6px 20px rgba(25, 118, 210, 0.4) !important;
  transform: translateY(-2px) !important;
}

.login-button:active {
  transform: translateY(0) !important;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .login-box {
    width: 90vw;
    padding: 40px 24px 32px 24px;
  }
  
  .art-title {
    font-size: 1.8rem;
  }
  
  .logo-icon {
    width: 56px;
    height: 56px;
    font-size: 28px;
  }
  
  .logo-icon svg {
    width: 28px;
    height: 28px;
  }
}
</style>